{include file="common:header" /}
{include file="common:side" /}
<div id="page-wrapper">
  <!-- 管理员列表->管理员列表 -->
  <!--*************************** content部分开始 ******************-->
  <div class="container-fluid" id="m_main">
    <div class="row m-t-20">
      <div class="col-sm-12">
        <div class="white-box">
          <h3 class="box-title m-b-20">管理员列表</h3>
          <!-- <p class="text-muted m-b-30">Data table example</p> -->
          <div class="row m-b-20">
            <div class="di fl p-l-15 m-r-30">
              <a href="/dboard/adminusers/adminae" class="btn btn-block btn-outline btn-info">添加</a>
            </div>
            <div class="col-sm-3">
              <div class="input-group">
                <span class="input-group-btn input-group-btn-search">
                  <i class="fa fa-search fa-blue"></i>
                </span>
                <input type="text" class="form-control input-group-input-search" placeholder="请输入昵称" v-model="user_name">
              </div>
            </div>
            <div class=" col-sm-2">
              <div class="di">
                <button class="btn btn-block btn-outline btn-info" @click="pageTo(1)">查询</button>
              </div>
            </div>
          </div>
          <div class="table-responsive">
            <table id="myTable" class="table table-striped color-table info-table">
              <thead>
                <tr>
                  <th>昵称</th>
                  <th>手机</th>
                  <th>所在部门</th>
                  <th>角色</th>
                  <th>备注</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody v-if="dataList.length>0">
                <tr v-for="(item,index) in dataList">
                  <td>{{item.user_name}}</td>
                  <td>{{item.phone}}</td>
                  <td>{{item.group_name}}</td>
                  <td>{{item.role_name}}</td>
                  <td>{{item.remark}}</td>
                  <td>{{item.status}}</td>
                  <td>
                    <a :href="'/dboard/adminusers/adminae/id/'+item.id" class="edit info">编辑</a>
                  </td>
                </tr>
              </tbody>
            </table>
            <pagination :tr-all="trAll" :page-cur="pageCur" :page-all="pageAll" :page-size="pageSize" @page-to="pageTo" ref="c1"></pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- /.row -->
  </div>
  <!--*************************** content部分结束 ******************-->

  <!-- <footer class="footer text-center"> 2017 &copy; Ample Admin brought to you by themedesigner.in </footer> -->
</div>
{include file="common:js" /}
<script type="text/javascript" src="/web/js/search_list.js"></script>
{include file="common:footer" /}
{include file="component:pagination" /}
<script type="text/javascript">
  var vm1 = new Vue({
    el: '#m_main',
    data() {
      return {
        searchUrl: "/dboard/adminusers/ajaxList", //搜索接口
        draw: '', //校验字段
        user_name:'',//昵称
        dataList: [], //搜索列表数据
        trAll: 0, //数据总数
        pageAll: 0, //页码总数
        pageCur: 1, //当前页
        pageSize: 10, //每页数量
      }
    },
    mounted() {
      this.pageTo(1);
    },
    methods: {
      // 搜索当前页并渲染列表
      pageTo(page) {
        var that = this;
        var params = {
          user_name: that.user_name
        };
        searchList(that,page,params,(res)=>{
        },(fail)=>{
        },(error)=>{
        })
      },
    }
  })
</script>
